<template>  
  <view class="container">
    <view class="title-row" v-if="historyList.length > 0">
      <text class="title">我的浏览</text>
      <text class="clear-btn" @click="clearHistory">清空历史</text>
    </view>
    <view class="collect-list" v-if="historyList.length > 0">
      <ConsultList :consultList="historyList" />
    </view>
    <view class="empty-notice" v-else>
      <u-empty
        mode="data"
        icon="/static/images/data_empty.png"
        marginTop="80"
        text="你还没有浏览记录哦"
      >
      </u-empty>
    </view>
  </view>
</template>

<script>
import ConsultList from '@/components/consult-list/consult-list';
export default {
  name: "mine_history",
  components: {
    ConsultList
  },
  data() {
    return {
      historyList: []
    };
  },
  onLoad() {
    this.getHistoryList();
  },
  onShow() {},
  onHide() {},
  created() {},
  mounted() {},
  methods: {
    getHistoryList() {
      let historyList = uni.getStorageSync('video_history');
      if (historyList) {
        this.historyList = historyList;
      }
    },
    clearHistory() {
      uni.showModal({
        title: '提示',
        content: '确定清空?',
        success: res => {
          if (res.confirm) {
            uni.removeStorageSync('video_history');
            this.historyList = [];
          }
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
  .container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title-row {
      width: 690rpx;
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 30rpx;
        color: #000;
      }
      .clear-btn {
        font-size: 24rpx;
        padding: 8rpx 30rpx;
        background-color: #f2f2f2;
        -webkit-border-radius: 30rpx;
        border-radius: 30rpx;
        color: #999;
      }
    }
    .collect-list {
      width: 690rpx;
      margin-top: 30rpx;
    }
    .empty-notice {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      /deep/ .u-empty {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
</style>
